<!--
 * @Author: Jason Liu
 * @Date: 2023-11-02 15:02:23
 * @Desc: 
-->
<template>
  <!-- <a-card class="hdw_module_field_container" size="small" :bordered="false">
    <template #title>
      模型字段 &nbsp;
      <a-input-search
        style="width: 180px"
        placeholder="请输入字段关键字"
        @search="onSearch"
      />
    </template>
    <template #extra>
      <a-button type="link" icon="plus" size="small" @click="addField">添加字段</a-button>
    </template> -->
  <a-collapse
    size="small"
    class="hdw_module_field_container"
    v-model="activeKey"
    :bordered="false"
    expand-icon-position="right"
  >
    <a-collapse-panel key="hdwFile">
      <template slot="header">
        <win-title>模型字段 <span v-if="!editEnabled" class="header-title__tip">（数仓公版表不允许修改字段）</span></win-title>
      </template>
      <template #extra>
        <a-space :size="12">
          <a-button type="primary" icon="code" size="small" :disabled="!id" @click.stop="sqlVisible=true">变更脚本</a-button>
          <a-button type="primary" icon="plus" size="small" :disabled="!editEnabled" @click.stop="addField"
            >添加字段</a-button>
        </a-space>
      </template>
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :loading="loading"
          :row-config="{ isHover: true, keyField: '_X_ROW_KEY' }"
          :data="fields"
          height="auto"
          ref="field_table"
          :keep-source="true"
          :edit-config="{
            trigger: 'click',
            enabled: editEnabled,
            mode: 'cell',
            showIcon: false,
            showStatus: true,
          }"
          :scroll-y="{ enabled: true, gt: 10 }"
        >
          <vxe-column
            type="seq"
            :title="$t('序号')"
            width="50"
            align="center"
            fixed="left"
          />
          <vxe-column
            field="columnCode"
            title="字段名"
            :edit-render="{}"
            sortable
            minWidth="160px"
            fixed="left"
          >
            <template #edit="{ row }">
              <a-input
                :disabled="defaultFieldDisabled(row)"
                placeholder="请输入字段名,英文"
                v-model.lazy="row.columnCode"
                @change="keyCode(row)"
              />
            </template>
          </vxe-column>
          <vxe-column
            field="columnName"
            title="字段说明"
            :edit-render="{}"
            minWidth="160px"
            sortable
          >
            <template #edit="{ row }">
              <a-input
                :disabled="defaultFieldDisabled(row)"
                placeholder="请输入字段说明"
                v-model.lazy="row.columnName"
                @change="changeNodel"
              />
            </template>
          </vxe-column>
          <vxe-column
            field="columnType"
            :title="$t('类型')"
            minWidth="160px"
            :edit-render="{}"
          >
            <template #default="{ row }">{{ row.columnType }}</template>
            <template #edit="{ row }">
              <a-select
                :disabled="defaultFieldDisabled(row)"
                v-model="row.columnType"
                :placeholder="$t('类型')"
                @change="changeNodel(row)"
              >
                <a-select-option
                  :value="item.value"
                  v-for="(item, i) in databaseOptions"
                  :key="i"
                  >{{ item.value }}</a-select-option
                >
              </a-select>
            </template>
          </vxe-column>
          <vxe-column
            field="columnSize"
            :title="$t('长度')"
            minWidth="100px"
            :edit-render="{}"
          >
            <template #edit="{ row }">
              <a-input-number
                :disabled="defaultFieldDisabled(row)"
                :placeholder="$t('长度')"
                :min="0"
                v-model.lazy="row.columnSize"
              />
            </template>
          </vxe-column>
          <vxe-column
            field="columnAccuracy"
            :title="$t('精度')"
            minWidth="100px"
            :edit-render="{}"
          >
            <template #edit="{ row }">
              <a-input-number
                :disabled="defaultFieldDisabled(row)"
                :placeholder="$t('精度')"
                :min="0"
                v-model.lazy="row.columnAccuracy"
              />
            </template>
          </vxe-column>
          <vxe-column
            field="defaultValue"
            title="默认值"
            :edit-render="{}"
            minWidth="160px"
          >
            <template #edit="{ row }">
              <a-input
                :disabled="defaultFieldDisabled(row)"
                :placeholder="$t('请输入默认值')"
                v-model.lazy="row.defaultValue"
              />
            </template>
          </vxe-column>

          <vxe-column
            field="isNull"
            title="非空"
            minWidth="100px"
            :edit-render="{}"
            align="center"
          >
            <template #default="{ row }">
              {{ row.isNull ? $t("是") : $t("否") }}
            </template>
            <template #edit="{ row }">
              <a-checkbox v-model="row.isNull" :disabled="defaultFieldDisabled(row)">{{ $t("是") }}</a-checkbox>
            </template>
          </vxe-column>
          <vxe-column
            field="pk"
            title="主键"
            minWidth="100px"
            :edit-render="{}"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.pk">
                <win-icon class="icon_primary_key" type="icon_primary_key" />{{
                  $t("主键")
                }}</span
              >
              <span v-else>-</span>
            </template>
            <template #edit="{ row }">
              <a-checkbox v-model="row.pk" :disabled="defaultFieldDisabled(row)">{{ $t("主键") }}</a-checkbox>
            </template>
          </vxe-column>
          <!-- <vxe-column
              field="autoincrement"
              :title="$t('自增')"
              minWidth="100px"
              align="center"
              :edit-render="{}"
            >
              <template #default="{ row }">
                <span v-if="row.autoincrement">{{ $t('自增') }}</span>
                <span v-else>-</span>
              </template>
              <template #edit="{ row }">
                <a-checkbox v-model="row.autoincrement">{{ $t('自增') }}</a-checkbox>
              </template>
            </vxe-column> -->
          <vxe-column
            field="title"
            :title="$t('操作')"
            width="90"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <a-button type="link" class="a_danger" :disabled="!editEnabled || defaultFieldDisabled(row)" @click="deleteRow(row)">{{
                $t("删除")
              }}</a-button>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t("暂无数据") }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
    </a-collapse-panel>
    <sqlScript ref="sqlScript" v-model="sqlVisible" :id="id"></sqlScript>
  </a-collapse>
  <!-- </a-card> -->
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
.hdw_module_field_container {
  width: 100%;
  height: 100%;
  /deep/.ant-collapse-item {
    height: 100%;

    .ant-collapse-content {
      height: 320px;
      // width: 100%;
      .ant-collapse-content-box {
        padding: 8px !important;
        height: 100%;
        .table_list {
          height: 100%;
          .ant-btn.ant-btn-link:disabled {
            color: rgba(0, 0, 0, 0.25) !important;
          }
        }
      }
    }
  }
}
.header-title__tip {
  color: #ec0000;
  font-size: 12px;
}
</style>
